Vue.component('country-picker',{
    data:function(){
        return {
            cur:0,
            countryIndex:-1,
            provinceIndex:-1,
            cityIndex:-1,
            whichProvince:'',
            countrys:null,
            newP:null,
            citys:null,
        }
    },
    template:
    ' <div id="countryPicker">'+
    '     <div class="countryPicker-head">'+
    '         <span v-for="(c,i) in [\'国家\',\'省份\',\'城市\']" @click="chooseTab(i)" :class="{\'activeSpan-countryPicker\':cur==i}">{{c}}</span>                                                                              '+
    '     </div>                                                                                                                                                                                                         '+
    '     <div class="countryPicker-content">                                                                                                                                                                            '+
    '         <ul class="countryPicker-country" v-show="cur==0">                                                                                                                                                         '+
    '             <li v-for="(country,index) in countrys" :key="index" @click="chooseCountry(index,country)" :class="{\'activeSpan-countryPicker\':countryIndex==index}">{{country.fName}}</li>                            '+
    '         </ul>                                                                                                                                                                                                      '+
    '         <div v-if="!newP&&cur==1" style="line-height:40px;text-align:center;color:#aeaeae;">请选择上一级</div>                                                                                                     '+
    '         <ul class="countryPicker-province scrollPart" v-show="cur==1&&newP">                                                                                                                                       '+
    '                                                                                                                                                                                                                    '+
    '             <li>                                                                                                                                                                                                   '+
    '                  <p style="color:#CC0066;padding-left:5px;">A-G</p>                                                                                                                                                '+
    '                 <ul class="countryPicker-provinceList">                                                                                                                                                            '+
    '                     <li v-for="(province,index) in provinceOne" :key="index" @click="chooseProvince(index,\'one\',province)" :class="{\'activeSpan-countryPicker\':provinceIndex==index&&whichProvince==\'one\'}">       '+
    '                         {{province.fName}}                                                                                                                                                                         '+
    '                     </li>                                                                                                                                                                                          '+
    '                 </ul>                                                                                                                                                                                              '+
    '             </li>                                                                                                                                                                                                  '+
    '             <li>                                                                                                                                                                                                   '+
    '                  <p style="color:#CC0066;line-height:40px;padding-left:5px;">H-K</p>                                                                                                                               '+
    '                 <ul class="countryPicker-provinceList">                                                                                                                                                            '+
    '                     <li v-for="(province,index) in provinceTwo" :key="index" @click="chooseProvince(index,\'two\',province)" :class="{\'activeSpan-countryPicker\':provinceIndex==index&&whichProvince==\'two\'}">       '+
    '                         {{province.fName}}                                                                                                                                                                         '+
    '                     </li>                                                                                                                                                                                          '+
    '                 </ul>                                                                                                                                                                                              '+
    '             </li>                                                                                                                                                                                                  '+
    '             <li>                                                                                                                                                                                                   '+
    '                  <p style="color:#CC0066;line-height:40px;padding-left:5px;">L-S</p>                                                                                                                               '+
    '                 <ul class="countryPicker-provinceList">                                                                                                                                                            '+
    '                     <li v-for="(province,index) in provinceThree" :key="index" @click="chooseProvince(index,\'three\',province)" :class="{\'activeSpan-countryPicker\':provinceIndex==index&&whichProvince==\'three\'}"> '+
    '                         {{province.fName}}                                                                                                                                                                         '+
    '                     </li>                                                                                                                                                                                          '+
    '                 </ul>                                                                                                                                                                                              '+
    '             </li>                                                                                                                                                                                                  '+
    '             <li>                                                                                                                                                                                                   '+
    '                  <p style="color:#CC0066;line-height:40px;padding-left:5px;">T-Z</p>                                                                                                                               '+
    '                 <ul class="countryPicker-provinceList">                                                                                                                                                            '+
    '                     <li v-for="(province,index) in provinceFour" :key="index" @click="chooseProvince(index,\'four\',province)" :class="{\'activeSpan-countryPicker\':provinceIndex==index&&whichProvince==\'four\'}">    '+
    '                         {{province.fName}}                                                                                                                                                                         '+
    '                     </li>                                                                                                                                                                                          '+
    '                 </ul>                                                                                                                                                                                              '+
    '             </li>                                                                                                                                                                                                  '+
    '                                                                                                                                                                                                                    '+
    '                                                                                                                                                                                                                    '+
    '           </ul>                                                                                                                                                                                                    '+
    '                                                                                                                                                                                                                    '+
    '           <ul class="countryPicker-city" v-show="cur==2">                                                                                                                                                          '+
    '                <li v-for="(city,index) in citys" @click="chooseCity(index,city)" :class="{\'activeSpan-countryPicker\':cityIndex==index}">                                                                           '+
    '                  {{city.fName}}                                                                                                                                                                                    '+
    '                </li>                                                                                                                                                                                               '+
    '                                                                                                                                                                                                                    '+
    '           </ul>                                                                                                                                                                                                    '+
    '                                                                                                                                                                                                                    '+
    '     </div>                                                                                                                                                                                                         '+
    ' </div>'                                                                                                                                                                                                             
    
    ,
    computed:{
        provinceOne:function(){
            if(this.newP){

                return this.newP.filter(function (item) {
                    return item.fInitial.charCodeAt(0)>96&&item.fInitial.charCodeAt(0)<104
                })
            }
            
        },
        provinceTwo:function(){
            if(this.newP){
                return this.newP.filter(function (item) {
                    return item.fInitial.charCodeAt(0)>103&&item.fInitial.charCodeAt(0)<108
                })
            }
        },
        provinceThree:function(){
            if(this.newP){
                return this.newP.filter(function (item) {
                    return item.fInitial.charCodeAt(0)>107&&item.fInitial.charCodeAt(0)<116
                })
            }
        },
        provinceFour:function(){
            if(this.newP){
                return this.newP.filter(function (item) {
                    return item.fInitial.charCodeAt(0)>115
                })
            }
        },

    },
    mounted: function () {
       
    },
    created:function(){
     
        this.getData(-1)
    //     let p= this.provinces;
    //     this.newP = p.sort(function(a,b){
    //        return a.str.charCodeAt() - b.str.charCodeAt();
    //    })
    //    console.log(this.provinceOne)
        
    //     console.log(this.newP)
        const head = document.getElementsByTagName('head')[0];
        const css = document.getElementById('countryPicker_css');
        if(!css){
            const style = document.createElement('style');
            let styleStr=
            '   #countryPicker{                                           '+
            '       width:320px;                                          '+
            '       // height:410px;                                      '+
            '       //background:#fff;                                    '+
            '       z-index:999;                                          '+
            '   }                                                         '+
            '   .activeSpan-countryPicker{                                '+
            '       background:#C4E1F8;                                   '+
            '   }                                                         '+
            '   .countryPicker-head{                                      '+
            '       width:100%;                                           '+
            '   }                                                         '+
            '   .countryPicker-head span{                                 '+
            '       display:inline-block;                                 '+
            '       width:70px;                                           '+
            '       height:32px;                                          '+
            '       line-height:30px;                                     '+
            '       text-align:center;                                    '+
            '       border:1px solid #B1D7F6;                             '+
            '       border-radius:2px;                                    '+
            '       border-bottom:none;                                   '+
            '       margin-right:2px!important;                           '+
            '       cursor:pointer;                                       '+
            '   }                                                         '+
            '   .countryPicker-content{                                   '+
            '       border:1px solid #B1D7F6;                             '+
            '       border-radius:2px;                                    '+
            '       width:100%;                                           '+
            '       min-height:40px;                                      '+
            '       background:#fff;                                      '+
            '       // height:382px;                                      '+
            '   }                                                         '+
            '   .countryPicker-country{                                   '+
            '       width:100%;                                           '+
            '       overflow:auto;                                        '+
            '       display:flex;                                         '+
            '       justify-content:flex-start;                           '+
            '       flex-wrap:wrap;                                       '+
            '       padding:10px;                                         '+
            '       // height:380px;                                      '+
            '   }                                                         '+
            '                                                             '+
            '   .countryPicker-country li{                                '+
            '       display:inline-block;                                 '+
            '       width:25%;                                            '+
            '       height:30px;                                          '+
            '       line-height:30px;                                     '+
            '       cursor:pointer;                                       '+
            '       padding-left:5px;                                     '+
            '   }                                                         '+
            '   .countryPicker-province{                                  '+
            '       width:100%;                                           '+
            '       max-height:380px;                                     '+
            '       overflow-y:scroll;                                    '+
            '       padding:10px;                                         '+
            '   }                                                         '+
            '   .countryPicker-provinceList{                              '+
            '                                                             '+
            '       display:flex;                                         '+
            '       justify-content:flex-start;                           '+
            '       flex-wrap:wrap;                                       '+
            '                                                             '+
            '   }                                                         '+
            '   .countryPicker-provinceList li{                           '+
            '       display:inline-block;                                 '+
            '       width:20%;                                            '+
            '       height:30px;                                          '+
            '       line-height:30px;                                     '+
            '       cursor:pointer;                                       '+
            '       padding-left:5px;                                     '+
            '   }                                                         '+
            '   .countryPicker-city{                                      '+
            '       display:flex;                                         '+
            '       justify-content:flex-start;                           '+
            '       flex-wrap:wrap;                                       '+
            '       padding:0 10px;                                       '+
            '   }                                                         '+
            '   .countryPicker-city li{                                   '+
            '       width:20%;                                            '+
            '       text-align:center;                                    '+
            '       cursor:pointer;                                       '+
            '   }                                                         '+
            '                                                             '+
            '   .scrollPart{                                              '+                              
            '       width:100%;                                           '+                              
            '       max-height:380px;                                     '+                                 
            '       background:#fff;                                      '+                              
            '       overflow:auto;                                        '+                              
            '       overflow-y:scroll;                                    '+
            '       padding:10px;                                         '+                         
            '   }                                                         '+                              
            '                                                             '+                              
            '   .scrollPart::-webkit-scrollbar {                          '+                                                                                                            
            '       width: 6px;                                           '+                                                                                                                   
            '       height: 1px;                                          '+                              
            '   }                                                         '+                              
            '                                                             '+                              
            '   .scrollPart::-webkit-scrollbar-thumb {                    '+                              
            '                                                             '+                              
            '       border-radius: 10px;                                  '+                              
            '       -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); '+                              
            '       background: rgba(48, 137, 213, 0.3);                  '+                              
            '       transition: all 0.2s;                                 '+                              
            '   }                                                         '+                              
            '                                                             '+                              
            '   .activeS::-webkit-scrollbar-thumb {                       '+                              
            '      background: rgba(47, 183, 236, 1) !important;          '+                              
            '   }                                                         '+                              
            '                                                             '+                              
            '   .scrollPart::-webkit-scrollbar-track {                    '+                              
            '                                                             '+                              
            '       border-radius: 10px;                                  '+                              
            '       background: #EDEDED;                                  '+                              
            '   }                                                          '



            
            ;
            style.innerHTML = styleStr;
            style.id = 'countryPicker_css'
            head.appendChild(style)
        }
    },
    methods:{
     
        getData:function(id){
            let that = this;
            $.ajax({
                url:'http://www.dev-zuma.com/wxpublic_web/region/queryAll',
                data:{fParentId:id},
                success:function(res){
                   //console.log(res.data,'rrr')
                   if(that.cur==0){
                    that.countrys = res.data
                    //console.log(that.countrys)
                   }else if (that.cur==1) {
                       that.newP = res.data.sort(function(a,b){
                            return a.fInitial.charCodeAt() - b.fInitial.charCodeAt();
                       })
                       //console.log(that.newP,'nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn')
                   }else if(that.cur==2){
                     that.citys = res.data
                   }
                   
                },
                error:function(err){
                    console.log(err,'错误')
                }
            })
        },
        chooseTab:function(index){
            this.cur = index;
        },
        chooseCountry:function(index,country){
            this.countryIndex = index;
            this.cur = 1
            this.getData(country.fId)
            this.$emit('choose-city-value',country,'country');
        },
        chooseProvince:function(index,types,province){
            this.provinceIndex = index;
            this.whichProvince=types
            this.cur = 2;
            this.getData(110000)
            //console.log(this.whichProvince)
            this.$emit('choose-city-value',province,'province');
        },
        chooseCity:function(index,city) {
            this.cityIndex = index;
            this.$emit('choose-city-value',city,'city');
            console.log(city,'选择的城市')
        }
    },
})